<template>
  <div>
    <!-- 轮播图 -->
    <div id="swiper">
      <Carousel autoplay :autoplay-speed="5000" v-model="defaultImg" loop>
        <CarouselItem v-for="(item,index) in swiperList" :key="index">
          <a :href="item.http" class="swiper-item" target="_blank">
            <div class="swiper-over">
              <p>{{ item.info }}</p>
            </div>
            <img :src="global.serviceUrl+item.src" :alt="item.msg">
          </a>
        </CarouselItem>
      </Carousel>
    </div>
    <!-- 主页内容 -->
    <div class="containner">
      <div id="body">
        <p id="project">
          我们的团队：
          <a
            href="https://gitee.com/organizations/itprefect/members/list"
            target="_blank"
            rel="noopener noreferrer"
          >
            <Icon type="md-git-pull-request"/>ITPerfect
          </a>
        </p>

        <!-- 热门推荐 -->
        <div class="lights">
          <Divider>
            <h2>热门推荐</h2>
          </Divider>
        </div>
        <Row>
          <Col :md="6" v-for="(item,index) in hotList" :key="index">
            <router-link tag="div" :to="{path:'/info',query:{id:item.id}}" class="hot-item">
              <img :src="global.serviceUrl + item.src|defaultImg" alt>
              <p class="hot-text">{{ item.title }}</p>
            </router-link>
          </Col>
        </Row>
      </div>
    </div>
    <img id="bc-imgs" src="static/default/big.png" alt>
    <div class="containner">
      <div id="connect">
        <!-- 联系我们 -->
        <div class="lights">
          <Divider>
            <h2>关于我们</h2>
          </Divider>
        </div>
        <div id="club">
          <p class="club-text">逆水行舟，不断努力突破自己，才能走得更远更深。</p>
          <Row>
            <Col :md="8">
              <div class="club-item">
                <img src="static/default/manong.jpg" alt class="club-img">
                <p class="club-user">码农无码</p>
                <p class="club-nick">首席负责人</p>
                <p class="club-info">熟悉的地方不是没有陷阱，而是我们已经习惯呆在陷阱里了。</p>
              </div>
            </Col>
            <Col :md="8">
              <div class="club-item">
                <img src="static/default/baolin.jpg" alt class="club-img">
                <p class="club-user">宝琳学姐</p>
                <p class="club-nick">首席Java程序员</p>
                <p class="club-info">单身狗的世界你不懂！</p>
              </div>
            </Col>
            <Col :md="8">
              <div class="club-item">
                <img src="static/default/panpan.jpg" alt class="club-img">
                <p class="club-user">攀爷</p>
                <p class="club-nick">首席服务员</p>
                <p class="club-info">对我来说最不可思议的事就是：我写的代码居然工作了。</p>
              </div>
            </Col>
          </Row>
        </div>
      </div>
    </div>
    <FooterView></FooterView>
  </div>
</template>
<script>
import FooterView from "@/components/Footer";
import { getSwiper, getHotList } from "@/config/api";
export default {
  name: "index",
  data() {
    return {
      defaultImg: 0,
      swiperList: [],
      hotList: []
    };
  },
  components: {
    FooterView
  },
  mounted() {
    getSwiper()
      .then(result => {
        this.swiperList = result.data;
      })
      .catch(err => {
        throw err;
      });
    //获取热门文章列表
    getHotList().then(result => {
      this.hotList = result.data;
    });
  },
  filters: {
    defaultImg(val) {
      if (val) {
        return val;
      } else {
        return "static/default/default.png";
      }
    }
  }
};
</script>
<style scoped>
.club-user{
  font-size: 16px;
  color: #000;
}
.club-nick{
  font-size: 12px;
  color: #999;
}
.club-info{
  font-size: 14px;
  color: #666;
}
/* 轮播 */
#swiper {
  width: 100%;
  height: 500px;
  clear: both;
}
.swiper-item {
  display: block;
  height: 500px;
  position: relative;
}
.swiper-over {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 20px;
  padding: 10px;
}
.swiper-item > img {
  width: 100%;
  height: 100%;
}
.hot-item {
  margin: 20px 30px;
  cursor: pointer;
}
.hot-item > img {
  height: 180px;
  width: 100%;
  display: block;
}
.hot-text {
  padding: 5px 2px;
  height: 60px;
  font-size: 14px;
}
.hot-item > img {
  height: 140px;
  width: 100%;
}
.hot-item:hover {
  box-shadow: 3px 5px 5px #ccc;
}
#body {
  margin-top: 10px;
  min-height: 400px;
}
.module {
  background-color: #fff;
  margin: 5px;
  padding: 5px;
  border-radius: 3px;
}
#project {
  text-align: center;
  font-size: 12px;
  padding: 20px 0;
  margin-top: 60px;
}
#project > a {
  display: inline-block;
  padding: 2px 10px;
  background-color: rgb(155, 47, 47);
  height: 20px;
  color: #fff;
  border-radius: 8px 0 8px 0;
}
.lights {
  margin: 0 auto;
  max-width: 300px;
  overflow: hidden;
  letter-spacing: 2px;
}
#connect {
  margin: 50px 0;
}
#club {
  width: 100%;
  padding: 10px 40px;
  line-height: 30px;
}
.club-text {
  text-indent: 2em;
  font-size: 14px;
  text-align: center;
}
.club-item {
  text-align: center;
  padding: 40px 0;
}
.club-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
#bc-imgs {
  width: 100%;
  height: 100%;
  margin: 100px 0;
}
@media screen and (max-width: 600px) {
  #swiper {
    width: 100%;
    height: 200px;
  }
  .swiper-item {
    height: 200px;
  }
  .hot-item > img {
    height: 120px;
    width: 100%;
  }
  #bc-imgs {
    margin: 40px 0;
  }
}
</style>


